본문으로 건너뛰기

스타일링과 색상

5. 스타일링과 색상​

SVG 그래픽을 더욱 생동감 있고 매력적으로 만들기 위해서는 스타일링과 색상을 효과적으로 활용하는 것이 중요합니다. 이 섹션에서는 SVG에서 제공하는 다양한 스타일링 옵션과 색상 기법에 대해 자세히 알아보겠습니다. 각 하위 섹션에서는 주요 개념과 함께 예제 코드를 통해 실습할 수 있도록 구성하였습니다.

5.1 채우기와 스트로크​

SVG에서 도형의 외곽선과 내부를 스타일링하는 기본적인 방법은 fill과 stroke 속성을 사용하는 것입니다. 이 두 속성을 적절히 활용하면 도형의 색상과 외관을 자유롭게 조절할 수 있습니다.

Fill과 Stroke 속성​

  • fill: 도형의 내부를 채우는 색상을 지정합니다.

  • stroke: 도형의 외곽선(테두리) 색상을 지정합니다.

  • 주요 속성

    • fill: 도형 내부의 채우기 색상
    • stroke: 도형 외곽선의 색상
    • stroke-width: 외곽선의 두께
    • stroke-linecap: 외곽선 끝의 모양 (butt, round, square)
    • stroke-linejoin: 외곽선의 연결 모양 (miter, round, bevel)

예제​

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 채우기와 스트로크 적용된 원 -->
  <circle
    cx="80"
    cy="100"
    r="50"
    fill="lightblue"
    stroke="blue"
    stroke-width="4"
  />

  <!-- 채우기 없는 직사각형 -->
  <rect
    x="150"
    y="50"
    width="100"
    height="100"
    fill="none"
    stroke="red"
    stroke-width="3"
  />
</svg>
  • 예제: 다양한 선 스타일
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 두꺼운 실선 -->
  <line x1="10" y1="10" x2="190" y2="10" stroke="black" stroke-width="5" />

  <!-- 얇은 점선 -->
  <line
    x1="10"
    y1="50"
    x2="190"
    y2="50"
    stroke="gray"
    stroke-width="2"
    stroke-dasharray="5,5"
  />

  <!-- 긴 대시와 짧은 간격 -->
  <line
    x1="10"
    y1="90"
    x2="190"
    y2="90"
    stroke="purple"
    stroke-width="3"
    stroke-dasharray="10,5"
  />
</svg>

5.2 그라디언트과 패턴 (Gradient, pattern)​

그라디언트와 패턴을 활용하면 도형의 색상을 더욱 다양하고 풍부하게 표현할 수 있습니다. SVG는 선형 그라디언트와 방사형 그라디언트, 그리고 반복 가능한 패턴을 지원하여 복잡한 텍스처나 배경을 손쉽게 적용할 수 있습니다. 이 섹션에서는 선형 그라디언트(<linearGradient>), 방사형 그라디언트(<radialGradient>), 그리고 패턴 정의(<pattern>)에 대해 자세히 알아보겠습니다.

그라디언트​

그라디언트는 색상이 점진적으로 변하는 효과를 제공합니다. SVG에서는 두 가지 주요 그라디언트를 사용할 수 있습니다: 선형 그라디언트와 방사형 그라디언트.

선형 그라디언트 (<linearGradient>)​

선형 그라디언트는 직선 방향으로 색상이 변하는 그라디언트입니다. 주로 도형의 일부분에 부드러운 색상 전환을 적용할 때 사용됩니다.

  • 주요 속성

    • id: 그라디언트의 고유 식별자
    • x1, y1: 그라디언트의 시작점 좌표
    • x2, y2: 그라디언트의 끝점 좌표
    • gradientUnits: 그라디언트의 좌표 시스템 (userSpaceOnUse 또는 objectBoundingBox)

  • 예제: 선형 그라디언트 적용

    <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
        </linearGradient>
      </defs>

      <!-- 그라디언트를 채우기로 적용한 사각형 -->
      <rect x="10" y="10" width="280" height="180" fill="url(#grad1)" />
    </svg>
방사형 그라디언트 (<radialGradient>)​

방사형 그라디언트는 중심에서 바깥쪽으로 색상이 변하는 그라디언트입니다. 원형이나 타원형의 부드러운 색상 전환을 적용할 때 유용합니다.

  • 주요 속성

    • id: 그라디언트의 고유 식별자
    • cx, cy: 그라디언트의 중심 좌표
    • r : 그라디언트의 반경
    • fx, fy : 초점의 좌표 (선택 사항)
    • gradientUnits: 그라디언트의 좌표 시스템 (userSpaceOnUse 또는 objectBoundingBox)

  • 예제: 선형 그라디언트 적용

    <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <radialGradient id="grad2" cx="50%" cy="50%" r="50%">
          <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
        </radialGradient>
      </defs>

      <!-- 그라디언트를 채우기로 적용한 원 -->
      <circle cx="150" cy="100" r="80" fill="url(#grad2)" />
    </svg>
패턴 정의 (<pattern>)​

패턴은 도형 내부에 반복적으로 나타나는 이미지를 정의합니다. 패턴을 사용하면 복잡한 텍스처나 배경을 손쉽게 적용할 수 있습니다.

  • 주요 속성

  • id: 패턴의 고유 식별자

  • width, height: 패턴의 반복 단위 크기

  • patternUnits: 패턴의 좌표 시스템 (userSpaceOnUse 또는 objectBoundingBox)

  • patternContentUnits: 패턴 내부 내용의 좌표 시스템 (userSpaceOnUse 또는 objectBoundingBox)

  • 예제: 패턴 적용

<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="pattern1" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle
        cx="10"
        cy="10"
        r="8"
        fill="lightgreen"
        stroke="green"
        stroke-width="2"
      />
    </pattern>
  </defs>

  <!-- 패턴을 채우기로 적용한 사각형 -->
  <rect x="10" y="10" width="280" height="180" fill="url(#pattern1)" />
</svg>

5.3 CSS를 이용한 스타일링​

CSS(Cascading Style Sheets)를 활용하면 SVG 요소에 다양한 스타일을 적용할 수 있으며, 외부 스타일 시트와의 연동을 통해 더욱 유연한 디자인이 가능합니다. CSS를 사용하여 SVG 그래픽을 스타일링하면 코드의 재사용성을 높이고, 유지보수를 용이하게 할 수 있습니다. 이 절에서는 외부 CSS와 인라인 스타일링, 그리고 CSS 클래스와 ID를 활용한 스타일링 방법에 대해 자세히 알아보겠습니다.

외부 CSS와 인라인 스타일링​

SVG 요소에 스타일을 적용하는 두 가지 주요 방법은 외부 CSS 파일을 사용하는 것과 인라인 스타일링을 사용하는 것입니다. 각 방법의 장단점과 사용 사례를 이해하면 상황에 맞게 적절히 선택할 수 있습니다.

외부 CSS​

외부 CSS 파일을 사용하면 스타일을 중앙에서 관리할 수 있어 대규모 프로젝트에서 유용합니다. 스타일을 재사용할 수 있고, HTML이나 SVG 파일과 분리하여 관리할 수 있기 때문에 코드의 가독성과 유지보수성이 향상됩니다.

  • 장점

    • 스타일의 재사용성 증가
    • 코드의 분리로 가독성 향상
    • 유지보수가 용이

  • 단점

    • 별도의 CSS 파일이 필요
    • 파일 로딩 시 추가 HTTP 요청 발생 가능

  • 예제: 외부 CSS 클래스 적용

    <!-- 외부 CSS 파일 (styles.css) -->
    <style>
      .blue-fill {
        fill: blue;
      }

      .red-stroke {
        stroke: red;
        stroke-width: 3;
      }
    </style>

    <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
      <!-- 외부 CSS 클래스 적용 -->
      <circle cx="80" cy="100" r="50" class="blue-fill red-stroke" />

      <!-- 인라인 스타일 적용 -->
      <rect
        x="150"
        y="50"
        width="100"
        height="100"
        style="fill: green; stroke: black; stroke-width: 2;"
      />
    </svg>